<template>
  <el-container class="main-layout">
    <el-header>
      <AppHeader />
    </el-header>

    <el-main>
      <router-view></router-view>
    </el-main>

    <el-footer>
      <AppFooter />
    </el-footer>
  </el-container>
</template>

<script>
import { defineComponent } from 'vue'
import AppHeader from '@/components/AppHeader.vue'
import AppFooter from '@/components/AppFooter.vue'

export default defineComponent({
  name: 'MainLayout',
  components: {
    AppHeader,
    AppFooter,
  },
})
</script>

<style scoped>
.main-layout {
  min-height: 100vh;
}

.el-header,
.el-footer {
  background-color: #fff;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  padding: 20px;
}
</style>
